<template>
	<div class="Search">
		<div class="mains">
			<!-- 面包屑 -->
			<div class="nav">
				<span>首页</span>
				<span class="arrow">></span>
				<span class="nav-concrete">居家生活</span>
			</div>
			<div class="main">
				<!-- 属性展示 -->
				<div class="categoryList">
					<div class="category">分类：</div>
					<div class="mainCategory">
						<a
							href="/"
							:class="attrIndex === -1 ? 'avtion' : ''"
							@click.prevent="changeIndex(1, -1)"
						>
							全部
						</a>
						<a
							:href="`#${attr.id}`"
							:class="attrIndex === index ? 'avtion' : ''"
							v-for="(attr, index) in attributeList"
							:key="attr.id"
							@click="changeIndex(1, index)"
						>
							{{ attr.name }}
						</a>
					</div>
				</div>
				<!-- 配送地址 -->
				<div class="area" v-if="goodList">
					<div class="region">配送地区：</div>
					<div class="regionCategory">
						<a
							href=""
							:class="regionIndex === -1 ? 'avtion' : ''"
							@click.prevent="changeIndex(2, -1)"
							>全部</a
						>
						<a
							href=""
							:class="regionIndex === index ? 'avtion' : ''"
							v-for="(deliver, index) in goodList.deliveryAreaList"
							:key="deliver.id"
							@click.prevent="changeIndex(2, index)"
							>{{ deliver.name }}</a
						>
					</div>
				</div>
				<div class="area">
					<div class="Ranking">排序：</div>
					<div class="RankingCategory">
						<a
							href=""
							:class="rankingIndex === 0 ? 'avtion' : ''"
							@click.prevent="changeIndex(3, 0)"
							>全部</a
						>
						<a
							href=""
							:class="rankingIndex === 1 ? 'avtion' : ''"
							@click.prevent="changeIndex(3, 1)"
						>
							默认价格
						</a>
						<a
							href=""
							:class="rankingIndex === 2 ? 'avtion' : ''"
							@click.prevent="changeIndex(3, 2)"
							>上架时间</a
						>
					</div>
				</div>
				<div v-if="isShow">
					<GoodsList
						v-for="item in attributeList"
						:key="item.id"
						:attrs="item"
						:itemList="goodList.categoryItemList[0].itemList.slice(0, 7)"
					/>
				</div>
				<General v-else :goodList="dynamicList.slice(0, 7)" />
			</div>
		</div>
	</div>
</template>

<script>
import GoodsList from "./components/GoodList.vue"
import General from "../../components/General/General.vue"
import { reqGetCateCoryList, reqGetSearchList } from "@/api/index"
export default {
	components: {
		GoodsList,
		General,
	},
	data() {
		return {
			// 第几项
			itemNumber: 0,
			// 属性列表
			attributeList: [],
			// 商品  地区列表
			goodList: [],
			// 改变之后的数组
			dynamicList: [],
			// 选择属性
			attrIndex: -1,
			// 选择地区
			regionIndex: -1,
			// 选择排序
			rankingIndex: 0,
			// 价格排序
			priceranking: true,
		}
	},
	computed: {
		isShow() {
			const { attrIndex, regionIndex, rankingIndex } = this
			let show = false
			if (attrIndex === -1 && regionIndex === -1 && rankingIndex === 0) {
				show = true
			}
			return show
		},
	},
	watch: {
		$route: {
			handler(route) {
				// console.log(route)
				const itemNumber = route.query.itemNumber * 1
				console.log(this.goodLists, this.attributeLists)
				this.goodList = this.goodLists[itemNumber]
				this.attributeList = this.attributeLists[itemNumber].subCateList
			},
		},
		priceranking() {
			const { rankingIndex, goodList, priceranking } = this
			const itemList = [...goodList.categoryItemList[0].itemList]
			// console.log(itemList)
			if (rankingIndex === 1) {
				if (priceranking) {
					this.dynamicList = itemList.sort((a, b) => {
						// console.log(a.retailPrice, b.retailPrice)
						return a.retailPrice - b.retailPrice
					})
				} else {
					this.dynamicList = itemList.sort((a, b) => {
						// console.log(a.retailPrice, b.retailPrice)
						return b.retailPrice - a.retailPrice
					})
				}
			}
		},
	},
	async created() {
		const itemNumber = this.$route.query.itemNumber
		// 获取属性列表   商品  地区列表
		const [attribute, goodList] = await Promise.all([
			reqGetCateCoryList(),
			reqGetSearchList(),
		])
		// console.log(goodList)
		this.attributeLists = attribute.data.cateList
		this.goodLists = goodList
		this.goodList = this.goodLists[itemNumber]
		this.attributeList = this.attributeLists[itemNumber].subCateList
	},
	methods: {
		// 选择属性，地区，排序
		changeIndex(num, index) {
			// console.log(num, index)
			const _this = this
			const strategy = {
				1() {
					_this.attrIndex = index
					// console.log(num, index, this)
				},
				2() {
					_this.regionIndex = index
				},
				3() {
					_this.rankingIndex = index
					if (index === 1) {
						_this.priceranking = !_this.priceranking
					}
				},
			}
			strategy[num] && strategy[num]()
		},
	},
}
</script>

<style lang="less" scoped>
.avtion {
	color: #b4a078;
}
.category,
.region,
.Ranking,
.nav-concrete {
	color: #999;
}
.Search {
	width: 100%;
	background: #f5f5f5;
}
.mains {
	margin: 0 auto;
	width: 1090px;
	/* background: white; */
}
.nav {
	width: 200px;
	font-size: 12px;
	color: #333;
	padding: 20px 0;
}
.nav .arrow {
	margin: 0 5px;
}
.main {
	padding: 0 35px;
	background: white;
}
.categoryList {
	display: flex;
	padding-top: 30px;
	font-size: 14px;
	border-bottom: 1px #000 dotted;
}
.category {
	float: left;
	margin-right: 30px;
}
.mainCategory {
	float: left;
	width: 900px;
}
.mainCategory a {
	float: left;
	margin-bottom: 16px;
	margin-right: 20px;
}
.mainCategory a:hover,
.regionCategory a:hover,
.RankingCategory a:hover {
	color: #b4a078;
	text-decoration: none;
}
.area {
	display: flex;

	padding: 16px 0;
	font-size: 14px;
	border-bottom: 1px #000 dotted;
}
.Ranking {
	margin-right: 28px;
}
.regionCategory {
	float: left;
	width: 800px;
}
.regionCategory a {
	float: left;
	margin-right: 30px;
}
.RankingCategory a {
	margin-right: 30px;
	float: left;
}
</style>
